<template>
    <div>
        <Card style="width:50vw">
            <p slot="title">账目类别设置</p>

            <div class="accountBox">
                <div v-for="(item, index) in formItem" :key="index">
                    <Input v-model="formItem[index]" class="FormItemInput" placeholder="账目类别"></Input>
                    <Icon v-if="index < formItem.length-1" @click="delOfficeStaff(index)" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />
                    <span v-else>
                        <Icon @click="delOfficeStaff(index)" v-show="index !== 0" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />
                        <Icon @click="addOfficeStaff" color="#2d8cf0" size="25" type="ios-add-circle-outline" style="font-weight: 700;" />
                    </span>
                </div>
            </div>

            <Button type="primary" class="sure_btn" @click="save">保存</Button>
        </Card>


    </div>
</template>
<script>
    import axios from '@/libs/api.request'
    export default {

        data() {
            return {

                modal1: false,

                // 新增/修改对象
                formItem: [''],
            }
        },
        methods: {

            // 获取账目类别列表
            getAccountCategoryList() {
                axios.ajax_post('admin-conf-ajax_get_wra', {}).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        // this.$Notice.success({
                        //     title: res.data.msg,
                        //     duration: 3
                        // })
                        this.formItem = res.data.data.wrat_info.work_recoud_account_type

                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 添加一个账目类别
            addOfficeStaff() {
                this.formItem.push('')
            },

            // 删除一个账目类别
            delOfficeStaff(index) {
                this.formItem.splice(index, 1)
            },

            // 保存
            save() {
                let data = {
                    work_recoud_account_type: this.formItem
                }
                axios.ajax_post('admin-conf-ajax_save_wra', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.getAccountCategoryList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        },
        created() {
            this.getAccountCategoryList()
        }

    }
</script>
<style lang="less" scoped>
    .search_div {
        margin-bottom: 10px;
    }

    .FormItemInput {
        width: 20vw;
    }

    .accountBox {
        margin-top: 30px;
        margin-left: 260px;

        >div {
            margin-bottom: 20px;
        }
    }

    .sure_btn {
        display: block;
        margin: 80px auto 30px;
        width: 10vw;
    }
</style>